{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "firefox/family/includes/macros.html" import module_tag, browser_border %}

<section id="private-mode" class="c-private-mode">
  <div class="mzp-l-content mzp-t-content-xl">
    {{ module_tag(title='Private mode', anchor='private-mode') }}

    <div class="l-grid">
      {% call browser_border() %}
        <svg class="c-private-mode-mask" width="112" height="112" viewbox="0 0 112 112" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="56.238" cy="55.987" r="53.215" fill="#FFD567" stroke="#000" stroke-width="4.438"/>
          <g clip-path="url(#a)"><path fill="#FFD567" d="M27.352 27.101h57.772v57.772H27.352z"/>
            <path d="M84.988 46.998c-5.507-7.225-16.31-8.15-23.04-1.968l-3.767 3.46H54.5l-3.763-3.46c-6.73-6.178-17.534-5.257-23.04 1.968-.711 2.816.39 13.215 1.01 14.851 1.254 6.608 6.652 11.576 13.126 11.576 3.232 0 6.16-1.289 8.474-3.354l1.412-1.206a6.99 6.99 0 0 1 9.067-.076l2.116 1.755v-.011c2.228 1.794 4.964 2.892 7.954 2.892 6.47 0 11.872-4.968 13.125-11.576.621-1.636 1.762-11.991 1.008-14.851ZM49.967 57.733c-1.542 1.74-3.928 2.86-6.615 2.86-2.686 0-5.073-1.12-6.615-2.86a2.502 2.502 0 0 1 0-3.268c1.542-1.74 3.929-2.86 6.615-2.86 2.687 0 5.073 1.12 6.615 2.86a2.502 2.502 0 0 1 0 3.268Zm25.997 0c-1.541 1.74-3.928 2.86-6.614 2.86-2.687 0-5.074-1.12-6.615-2.86a2.502 2.502 0 0 1 0-3.268c1.541-1.74 3.928-2.86 6.615-2.86 2.686 0 5.073 1.12 6.614 2.86a2.502 2.502 0 0 1 0 3.268Z" fill="#000"/>
          </g>
          <defs>
            <clipPath id="a">
              <path fill="#fff" transform="translate(27.352 27.101)" d="M0 0h57.772v57.772H0z"/>
            </clipPath>
          </defs>
        </svg>
        <h3 class="c-subtitle">The private browsing mode paradox</h3>
        <p>On the one hand, private browsing can make it harder for advertisers to track your kid
          <em>*dramatic pause*</em> but it also erases their browsing history.</p>
      {% endcall %}

      <div class="c-card t-shadow">
        <h4 class="c-title-uppercase">Things to talk about:</h4>
        <p>Note: Private browsing might be the elephant in the room or it could be
          a thing they haven’t discovered yet. Proceed with caution.</p>
        <p>Consider talking about
          <a rel="external" href="https://support.mozilla.org/kb/block-and-unblock-websites-parental-controls-firef?{{ utm_params }}">dangers of things like adult content</a>
          in a way that’s appropriate for their age.</p>
      </div>

      <div class="c-blurb">
        <h4 class="c-blurb-title">Something to think about:</h4>
        <p>There are plenty of parental control/internet monitoring apps available, but is installing one really the right move?
          <a rel="external" href="https://blog.mozilla.org/en/internet-culture/deep-dives/parental-controls-internet-safety-for-kids/?{{ utm_params }}">There’s actually a lot to consider.</a></p>
      </div>
    </div> <!-- .l-grid -->
  </div>  <!-- .mzp-l-content -->
</section>
